<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h2>个人信息</h2>
        </div>
      </template>

      <div class="profile-content">
        <div class="avatar-section">
          <el-avatar :size="100" icon="el-icon-user" class="user-avatar" />
          <h3>{{ userInfo.username }}</h3>
          <p class="user-email">{{ userInfo.email }}</p>
        </div>

        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="profile-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" disabled />
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input 
              v-model="formData.email"
              :prefix-icon="'el-icon-message'"
            />
          </el-form-item>

          <el-form-item label="创建时间">
            <el-input :value="formatDate(userInfo.createdAt)" disabled />
          </el-form-item>

          <el-form-item>
            <el-button 
              type="primary"
              @click="handleUpdate"
              :loading="loading"
              class="update-btn"
            >
              保存修改
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

export default {
  name: 'UserProfile',
  setup() {
    const store = useStore()
    const formRef = ref(null)
    const loading = ref(false)
    const userInfo = ref({})

    const formData = reactive({
      username: '',
      email: ''
    })

    const rules = {
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }

    const formatDate = (date) => {
      if (!date) return ''
      return new Date(date).toLocaleString()
    }

    const loadUserInfo = async () => {
      try {
        const user = store.getters.currentUser
        userInfo.value = user
        formData.username = user.username
        formData.email = user.email
      } catch (error) {
        ElMessage.error('获取用户信息失败')
      }
    }

    const handleUpdate = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        // 调用更新用户信息的API
        await store.dispatch('updateProfile', formData)
        ElMessage.success('更新成功')
        
        // 重新加载用户信息
        await loadUserInfo()
      } catch (error) {
        ElMessage.error('更新失败')
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      loadUserInfo()
    })

    return {
      formRef,
      formData,
      loading,
      userInfo,
      rules,
      formatDate,
      handleUpdate
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.avatar-section {
  text-align: center;
  padding: 20px 0 40px;
}

.user-avatar {
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  margin-bottom: 15px;
}

.user-email {
  color: #909399;
  margin: 5px 0 0;
}

.profile-form {
  max-width: 500px;
  margin: 0 auto;
}

:deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

:deep(.el-input__inner:disabled) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #909399;
}

.update-btn {
  width: 100%;
  margin-top: 20px;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  border: none;
  padding: 12px 0;
  transition: all 0.3s;
}

.update-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
</style> 